<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="web app refer from: http://vitovan.com/lispweb3.html">
    <title>Notes | Lisp</title>
    <style>
        button {
            background: #FFF none repeat scroll 0% 0%;
            border: none;
            cursor: pointer;
        }

        .card {
            max-width: 100%;
            display: flex;
            flex-direction: column;
            width: 20em;
            padding: 1em;
            border-radius: 0.25rem;
            box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
            float: left;
            margin: 1em 1em 1em 0px;
        }

        .card>.note {
            font-size: 1.5em;
        }

        .template {
            display: none;
        }

        .button {
            background-color: #2185D0;
            color: #FFF;
            cursor: pointer;
            display: inline-block;
            padding: 0.75em 1.5em;
            line-height: 1em;
            border-radius: 0.25em;
        }

        .button:active {
            background-color: #1A69A4;
            color: #FFF;
            text-shadow: none;
        }

        .button:focus {
            background-color: #0D71BB;
            color: #FFF;
            text-shadow: none;
        }

        .button:hover {
            background-color: #1678C2;
            color: #FFF;
            text-shadow: none;
        }

        input[type="text"] {
            margin: 10px 0;
            max-width: 100%;
            line-height: 1.5em;
            padding: 0.5em;
            border: 1px solid rgba(34, 36, 38, 0.15);
            border-radius: 0.25rem;
            box-shadow: 0px 1px 2px 0px rgba(34, 36, 38, 0.15);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input">
            <input id="input" type="text" name="note" placeholder="Something">
            <a class="button" id="create">Create</a>
        </div>
        <hr>
        <div class="notes">
            <h2>Notes</h2>
            <a class="button" id="refresh">Reflash</a>
            <div class="cards">
            </div>
        </div>
    </div>
    <div class="card template">
        <div class="note">Hack</div>
        <div>
            Write in:
            <span class="date">0000-00-00-00h-00m-00s</span>
            id:<span class="id">0</span>
        </div>
        <div>
            <button class="delete">Del</button>
        </div>
    </div>
    <script>
        const refresh = () => {
            fetch('/api/notes', { method: "GET" })
                .then(res => res.json())
                .then(notes => {
                    document.querySelector('.cards').innerHTML = null;
                    notes && notes.map((obj, index, arr) => {
                        const template = document.querySelector('.template').cloneNode(true);
                        template.classList.remove('template');
                        template.querySelector('.id').innerText = obj.id;
                        template.querySelector('.note').innerText = obj.value;
                        template.querySelector('.date').innerText = obj.date;
                        template.querySelector('.delete').onclick = (e) => {
                            const id = obj.id;
                            fetch(`/api/delete?id=${id}`, {
                                method: 'POST'
                            }).then(res => res.json())
                                .then(res => {
                                    refresh();
                                })
                        }
                        document.querySelector('.cards').appendChild(template);
                    });
                })
        }
        document.onreadystatechange = () => {
            if (document.readyState != "interactive") {
                return;
            }
            refresh();
            document.querySelector('#create').onclick = () => {
                var note = document.querySelector('#input').value;
                if (note == '') {
                    return
                }
                fetch(`/api/add?value=${note}`, {
                    method: 'POST'
                }).then(res => res.json())
                    .then(notes => {
                        document.querySelector('#input').value = "";
                        refresh();
                    })
            };
            document.querySelector('#refresh').onclick = () => {
                refresh();
            };
        }
    </script>
</body>

</html>